<template>
	<view class="trainer">
		<!-- #ifdef APP-PLUS -->
		<top-set></top-set>
		<tab-top fixed="true" title="专业培训"></tab-top>
		<!-- #endif -->
		<view class="trainer-item" v-for="(item,index) in trainer" :key="index" @tap="toTrainer(item)">
			<view class="video">
				<image src="http://static.sxkzbs.com/liucheng.mp4?vframe/jpg/offset/4"></image>
				<image class="play" src="/static/icon/play.png"></image>
			</view>
			<view class="content">
				<view class="title">这些服务标准，我不准你不知道！</view>
				<view class="text">最全套的保洁服务标准，全面了解客房服务流程</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			trainer:[,]
		};
	},
	onLoad() {},
	methods: {
		toTrainer(e){
			uni.navigateTo({
				url: '/pages/cleaner/service/trainer-details?id=' + e
			});
		}
	}
};
</script>

<style scoped lang="scss">
.trainer{
	color: #333333;
	margin-bottom: 50upx;
	.trainer-item:nth-child(1){
		margin-top: 40upx;
	}
	.trainer-item{
		width: 702upx;
		margin: 0 auto;
		height: auto;
		margin-top: 30upx;
		background-color: #ffffff;
		box-shadow: 0upx 5upx 30upx 0px rgba(0, 0, 0, 0.12);
		border-radius: 8upx;
		.video{
			width: 702upx;
			height: 300upx;
			position: relative;
			.play{
				width: 70upx;
				height: 70upx;
				position: absolute;
				top: 115upx;
				left: 316upx;
			}
			image{
				width: 702upx;
				height: 300upx;
				border-radius: 8upx 8upx 0px 0px;
			}
		}
		.content{
			padding: 24upx;
			line-height: 1;
			.title{
				font-size: 32upx;
				margin-bottom: 16upx;
			}
			.text{
				font-size: 24upx;
				color: #999999;
			}
		}
	}
}
</style>
